<template>
<div>
    <van-nav-bar
    title="菜谱分类"
    left-arrow
    @click-left="onClickLeft"
    class="header"
    />
    <h1 class="rmfl">热门分类</h1>
    <div class="imgBox">
        <div class="imgBox1" v-for="a in rmfl" :key="a" v-bind:style="{ 'background-image': 'url('+ a.bgurl+')'}">
            <router-link :to="a.path">
            <h1>{{ a.h }}</h1>
            </router-link>
        </div>
    </div>
     <h1 class="rmfl">菜式</h1>
    <div class="imgBox">
        <div class="imgBox1" v-for="a in cs" :key="a" v-bind:style="{ 'background-image': 'url('+ a.bgurl+')'}">
            <h1>{{ a.h }}</h1>
        </div>
    </div>
     <h1 class="rmfl">场景</h1>
    <div class="imgBox">
        <div class="imgBox1" v-for="a in cs" :key="a" v-bind:style="{ 'background-image': 'url('+ a.bgurl+')'}">
            <h1>{{ a.h }}</h1>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            rmfl: ''
        };
    },
    created: function () {
        const api = '/cpfl.json';
        this.axios.get(api).then((response) => {
            this.rmfl = response.data.rmfl;
            this.cs = response.data.cs;
        });
    },
    methods: {
        onClickLeft: function () {
            this.$router.push('/');
        }
    }
};
</script>
<style lang="less">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-weight: normal;
    font-size: 14px;
}
.left{
    float: left;
}
.right{
    float: right;
}
.rmfl{
    margin-left: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}
.imgBox{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
.imgBox1{
    width: 20.5%;
    padding-bottom: 20.5%;
    position: relative;
    border-radius: 5px;
    background-size: 100% 100%;
    margin-top: 2%;
    h1{
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 5px;
        color: #fff;
    }
}
}
</style>
